<template>
    <div class="home">
        <!-- 冒号传值 ——父子组件传值 -->
        <home-header class="home-header" :city='city'></home-header>
        <home-swiper :swiperList='swiperList'></home-swiper>
        <home-catalog :iconList='iconList'></home-catalog>
        <home-hot :hotPriseList='hotPriseList' :hotTrendList='hotTrendList' :hotContentList='hotContentList'></home-hot>
        <home-weekend :weekendList='weekendList'></home-weekend>
        <home-guess :guessList='guessList'></home-guess>
    </div>
</template>

<script>
// 引入axios
import axios from 'axios'
// 引入组件并注册
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatalog from './components/homeCatalog' 
import homeHot from './components/homeHot' 
import homeWeekend from './components/homeWeekend' 
import homeGuess from './components/homeGuess' 

export default {
  name: 'Home',
  components:{
      homeHeader,
      homeSwiper,
      homeCatalog,
      homeHot,
      homeWeekend,
      homeGuess
  },
  data(){
      return{
          city:'',
          guessList:[],
          hotPriseList:[],
          hotTrendList:[],
          hotContentList:[],
          iconList:[],
          swiperList:[],
          weekendList:[]
      }
  },
  methods:{
      getHomeData(){
          axios.get("/api/index.json").then(this.getHomeDataSucc)
      },
      //请求执行成功的函数   
      getHomeDataSucc(res){
          res=res.data
          if(res.data){
              const data=res.data
              this.city=data.city
              this.guessList=data.guessList
              this.hotPriseList=data.hotPriseList
              this.hotTrendList=data.hotTrendList
              this.hotContentList=data.hotContentList
              this.iconList=data.iconList
              this.swiperList=data.swiperList           
              this.weekendList=data.weekendList           
          }
      }
  },
  mounted(){
    //当页面一加载就去触发请求数据的请求
    this.getHomeData()
  }
  
}
</script>


<style lang='stylus' scoped>
.home
    position:relative
    .home-header
      position:fixed
      top:0
      left:0
      z-index:100
      width:100%

</style>
